<template>
  <div class="container">
    <div class="page-breadcrumb">
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/training-course-list' }">选课中心</el-breadcrumb-item>
        <el-breadcrumb-item  v-if="$store.state.app.footer.webTemplateType &&  $store.state.app.footer.webTemplateType.indexOf('V4') == -1">全部专业课</el-breadcrumb-item>
        <el-breadcrumb-item  v-if="$store.state.app.footer.webTemplateType &&  $store.state.app.footer.webTemplateType.indexOf('V4') !== -1">全部课程</el-breadcrumb-item>
      </el-breadcrumb>
    </div>

    <div class="course-nav-box">
      <div class="types_ul">
        <el-radio-group class="course-nav-item" v-model="listQuery.typeId" size="medium" v-if="typesList.length !== 0" @change="getList">
          <el-radio-button v-for="item in typesList" :label="item.id" :key="item.key">{{item.name}}</el-radio-button>
        </el-radio-group>

        <el-radio-group   class="course-nav-item" v-model="listQuery.publishYear" size="medium"  v-if="yearList.length !== 0 && !repairYear && !searchYear" @change="getList">
          <el-radio-button  v-for="item in yearList" :label="item.key" :key="item.key">{{item.value}}</el-radio-button>
        </el-radio-group>

        <el-checkbox-button disabled  class="course-nav-item-checkAll " v-if="yearList.length !== 0 && repairYear"  v-model="checkAll" @change="handleCheckAllChange">全部</el-checkbox-button>

        <el-checkbox-group   class="course-nav-item" v-model="listQuery.publishYears" v-if="yearList.length !== 0 && repairYear" @change="change">
          <el-checkbox-button disabled v-for="item in yearList.slice(1)" :label="item.key" :key="item.key">{{item.value}}</el-checkbox-button>
        </el-checkbox-group>

        <el-checkbox-button disabled  class="course-nav-item-checkAll " v-if="yearList.length !== 0 && searchYear"  v-model="checkAll" @change="handleCheckAllChange">全部</el-checkbox-button>

        <el-checkbox-group   class="course-nav-item" v-model="listQuery.publishYears" v-if="yearList.length !== 0 && searchYear" @change="change">
          <el-checkbox-button disabled v-for="item in yearList" v-if="searchYear == item.value" :label="item.key" :key="item.key">{{item.value}}</el-checkbox-button>
        </el-checkbox-group>
      </div>
    </div>

    <div class="moco-course-list">
      <TrainCourseItemContent :width="'878px'" v-for="item in list" :itemObj="item" :key="item.id"/>
    </div>


    <pagination class="center-pagination-theme" v-show="total>0" :total="total" layout="total, prev, pager, next, jumper"  :page.sync="listQuery.pageNum"
                :limit.sync="listQuery.pageSize" @pagination="getList"/>
  </div>
</template>

<script>
 import index from "./indexjs"
 export default {
   ...index
 }
</script>

<style scoped lang="scss">
  @import "~@/styles/variables.scss";
  @import "index";

</style>
